<template>
  <div class="novel-detail">
    <!-- 小说基本信息 -->
    <div class="novel-header">
      <div class="novel-cover">
        <img src="https://picsum.photos/id/24/200/300" alt="小说封面" />
      </div>
      <div class="novel-info">
        <h1>《斗破苍穹》</h1>
        <div class="author-info">
          <span class="author">天蚕土豆</span>
          <span class="category">玄幻</span>
          <span class="status">连载中</span>
        </div>
        <div class="novel-stats">
          <span>总字数：530万字</span>
          <span>总点击：1000万+</span>
          <span>总推荐：500万+</span>
        </div>
        <div class="novel-buttons">
          <button class="read-now-btn">立即阅读</button>
          <button class="collect-btn">
            <i class="collect-icon"></i>收藏
          </button>
          <button class="recommend-btn">
            <i class="recommend-icon"></i>推荐
          </button>
          <button class="download-btn">
            <i class="download-icon"></i>下载
          </button>
        </div>
      </div>
    </div>
    
    <!-- 内容导航 -->
    <div class="content-nav">
      <div class="nav-tabs">
        <button class="active">作品简介</button>
        <button>章节目录</button>
        <button>作品动态</button>
        <button>精彩书评</button>
        <button>相关推荐</button>
      </div>
    </div>
    
    <!-- 作品简介 -->
    <div class="novel-intro">
      <h2>作品简介</h2>
      <p>
        这是一个属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！
        新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。
      </p>
      <p class="more-intro">
        萧炎，主人公，萧家历史上空前绝后的斗气修炼天才。4岁就开始修炼斗之气，10岁拥有了九段斗之气，11岁突破十段斗之气，一跃成为家族百年来最年轻的斗者。然而在12岁那年，他却“丧失”了修炼能力，只拥有三段斗之气。整整三年时间，家族冷遇，旁人轻视，被未婚妻退婚……种种打击接踵而至。
        就在他即将绝望的时候，一缕幽魂从他手上的戒指里浮现，一扇全新的大门在面前开启！萧炎重新成为家族年轻一辈中的佼佼者，受到众人的仰慕，他却不满足于此。为了一雪退婚带来的耻辱，萧炎来到了魔兽山脉，在药老的帮助下，为了进一步提升自己的修为，在魔兽山脉，他结识了小医仙，云芝（云岚宗宗主云韵），并与她们之间发生了一系列的故事。
        萧炎重新崛起的故事，由此展开……
      </p>
    </div>
    
    <!-- 最新章节 -->
    <div class="latest-chapters">
      <div class="section-header">
        <h3>最新章节</h3>
        <a href="#" class="view-all">查看全部章节 &gt;</a>
      </div>
      <div class="chapters-list">
        <a href="#" class="chapter-item">
          <span class="chapter-title">第1234章 大结局（上）</span>
          <span class="chapter-time">2023-12-20</span>
        </a>
        <a href="#" class="chapter-item">
          <span class="chapter-title">第1233章 最终之战</span>
          <span class="chapter-time">2023-12-19</span>
        </a>
        <a href="#" class="chapter-item">
          <span class="chapter-title">第1232章 斗气大陆的秘密</span>
          <span class="chapter-time">2023-12-18</span>
        </a>
        <a href="#" class="chapter-item">
          <span class="chapter-title">第1231章 突破斗帝</span>
          <span class="chapter-time">2023-12-17</span>
        </a>
        <a href="#" class="chapter-item">
          <span class="chapter-title">第1230章 远古遗迹</span>
          <span class="chapter-time">2023-12-16</span>
        </a>
      </div>
    </div>
    
    <!-- 热门书评 -->
    <div class="comments-section">
      <div class="section-header">
        <h3>热门书评</h3>
        <a href="#" class="view-all">查看全部 &gt;</a>
      </div>
      <div class="comments-list">
        <div class="comment-item">
          <div class="comment-user">
            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="user-avatar" />
            <span class="user-name">书友123456</span>
          </div>
          <div class="comment-content">
            <p>天蚕土豆的经典之作，故事情节跌宕起伏，人物形象鲜明，非常值得一读！</p>
          </div>
          <div class="comment-footer">
            <span class="comment-time">2023-12-15</span>
            <div class="comment-actions">
              <button class="like-btn">
                <i class="like-icon"></i>点赞 (128)
              </button>
              <button class="reply-btn">回复</button>
            </div>
          </div>
        </div>
        <div class="comment-item">
          <div class="comment-user">
            <img src="https://picsum.photos/id/65/40/40" alt="用户头像" class="user-avatar" />
            <span class="user-name">书虫888</span>
          </div>
          <div class="comment-content">
            <p>萧炎的成长历程令人感动，从一个被退婚的废物到成为斗气大陆的巅峰强者，这种逆袭的故事总是让人热血沸腾！</p>
          </div>
          <div class="comment-footer">
            <span class="comment-time">2023-12-10</span>
            <div class="comment-actions">
              <button class="like-btn">
                <i class="like-icon"></i>点赞 (95)
              </button>
              <button class="reply-btn">回复</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 相关推荐 -->
    <div class="recommendations">
      <div class="section-header">
        <h3>猜你喜欢</h3>
      </div>
      <div class="recommend-list">
        <div class="recommend-item" v-for="i in 6" :key="i">
          <img :src="`https://picsum.photos/id/${30+i}/120/180`" alt="推荐小说封面" />
          <div class="recommend-info">
            <h4>相关推荐小说{{ i }}</h4>
            <p>作者{{ i }}</p>
            <span>玄幻 · 连载中</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 小说详情页样式 */
.novel-detail {
  width: 100%;
}

/* 小说基本信息 */
.novel-header {
  display: flex;
  gap: 20px;
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.novel-cover img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  border-radius: 4px;
}

.novel-info {
  flex: 1;
}

.novel-info h1 {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.author-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.author {
  font-size: 16px;
  color: #e81742;
}

.category, .status {
  font-size: 14px;
  color: #666;
  padding: 2px 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.status {
  color: #06d6a0;
}

.novel-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.novel-buttons {
  display: flex;
  gap: 15px;
}

.read-now-btn, .collect-btn, .recommend-btn, .download-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.read-now-btn {
  background-color: #e81742;
  color: #fff;
}

.collect-btn {
  background-color: #fff;
  color: #e81742;
  border: 1px solid #e81742;
}

.recommend-btn, .download-btn {
  background-color: #f8f8f8;
  color: #333;
  border: 1px solid #ddd;
}

.read-now-btn:hover {
  background-color: #c0123a;
}

.collect-btn:hover {
  background-color: #fff0f3;
}

.recommend-btn:hover, .download-btn:hover {
  background-color: #f0f0f0;
}

/* 内容导航 */
.content-nav {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-tabs {
  display: flex;
  border-bottom: 2px solid #f0f0f0;
}

.nav-tabs button {
  flex: 1;
  padding: 15px 20px;
  background-color: transparent;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-tabs button.active {
  color: #e81742;
  border-bottom: 3px solid #e81742;
}

.nav-tabs button:hover {
  color: #e81742;
}

/* 作品简介 */
.novel-intro {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.novel-intro h2 {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.novel-intro p {
  margin: 0 0 15px 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

/* 最新章节 */
.latest-chapters {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 14px;
  color: #e81742;
}

.chapters-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chapter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.chapter-item:hover {
  color: #e81742;
}

.chapter-title {
  font-size: 16px;
}

.chapter-time {
  font-size: 14px;
  color: #999;
}

/* 热门书评 */
.comments-section {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-item {
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.comment-content p {
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-actions {
  display: flex;
  gap: 20px;
}

.like-btn, .reply-btn {
  padding: 0;
  background-color: transparent;
  border: none;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}

.like-btn:hover, .reply-btn:hover {
  color: #e81742;
}

/* 相关推荐 */
.recommendations {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.recommend-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  transition: all 0.3s;
}

.recommend-item:hover {
  border-color: #e81742;
  box-shadow: 0 2px 8px rgba(232, 23, 66, 0.1);
}

.recommend-item img {
  width: 120px;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}

.recommend-info h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.recommend-info p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #999;
}

.recommend-info span {
  font-size: 12px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .novel-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .novel-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .nav-tabs {
    flex-wrap: wrap;
  }
  
  .nav-tabs button {
    flex: none;
    width: 50%;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .novel-stats {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  
  .author-info {
    justify-content: center;
  }
  
  .recommend-list {
    grid-template-columns: 1fr;
  }
}
</style>
